<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <title>Title</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            ul,
            li {
                list-style: none;
            }

            ul {
                display: flex;
                justify-content: space-around;
                height: 50px;
                line-height: 50px;
                background: aquamarine;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li @click="goPage('home')">首页</li>
                <li @click="goPage('kind')">分类</li>
                <li @click="goPage('cart')">购物车</li>
                <li @click="goPage('me')">我的</li>
            </ul>
            <keep-alive include="home,kind">
                <component :is="type"></component>
            </keep-alive>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            let home = {
                template: `<div>首页
<input type="text" placeholder="请输入首页数据"></div>`
            }
            let kind = {
                template: `<div>分类页<input type="text" placeholder="请输入分类页数据"></div>`
            }
            let cart = {
                template: `<div>购物车页<input type="text" placeholder="请输入购物车页数据"></div>`
            }
            let me = {
                template: `<div>我的页<input type="text" placeholder="请输入我的页数据"></div>`
            }

            let vm = new Vue({
                el: "#app",
                data: {
                    type: 'home'
                },
                components: {
                    home, kind, cart, me
                },
                methods: {
                    goPage(type) {
                        this.type = type;
                    }
                }
            });
        </script>
    </body>
</html>